<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> DataTables Demo </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="js/dataTables.treeGrid.js"></script>
 </head>

 <body>
 <!-- DEMO样例仅供大家参考；
      注意要在WEB容器运行 如：IIS、Nginx、Tomcat等 否则AJAX会以 file:// 请求出现错误；
 -->
 <table class="table table-striped table-bordered table-hover" id="treetable">
	<thead>
		<tr>
			<th></th>
			<th>部门名称</th>
			<th>英文名称</th>
			<th>负责人</th>
			<th>部门电话</th>
			<th>部门地址</th>
			<th>主要职能</th>
		</tr>
	</thead>
	<tbody></tbody>
  </table>

  <script type="text/javascript">
    var dataTable;
   $(function () {
        dataTable = $('#treetable').DataTable({
            /**
             l - Length changing 改变每页显示多少条数据的控件
             f - Filtering input 即时搜索框控件
             t - The Table 表格本身
             i - Information 表格相关信息控件
             p - Pagination 分页控件
             r - pRocessing 加载等待显示信息
             **/
            "dom": "tr",
            "ordering": false, //禁用排序
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "json/data.json",
            },
            'treeGrid': {
                'left': 15,
                'expandAll' : true, //是否默认展开 true 是
                'expandIcon': '<span> + </span>',
                'collapseIcon': '<span> - </span>'
            },
            "columns": [
                {
                    className: 'treegrid-control',
                    data: function (item) {
                        if (item.children != null && item.children.length > 0) {
                            return '<span> + </span>';
                        }
                        return '';
                    }
                },
                {"data": "name"},
                {"data": "nameEn"},
                {"data": "headMan"},
                {"data": "tel"},
                {"data": "address"},
                {"data": "functions"}
            ],
            "columnDefs": [
                {
                    "defaultContent": "",
                    "targets": "_all"
                }
            ]
        });
    });

</script>
 </body>
</html>
